<template>
  <div>
    <!--  首部小导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/mine' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>个人资料</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>


    <el-form ref="form" :model="form" label-width="80px" style="border: #d2d3d4 solid 1px;padding:30px 80px 0 50px">
      <el-form-item label="昵称">
        <el-col :span="11">
          <el-input
              v-model="nick"
              :disabled="nickNotChangeable">
          </el-input>
          <span>今年还有 <a href="javaScript:0">{{ this.form.nickChange }}</a> 次修改昵称的机会
      <a v-if="nickNotChangeable" href="javascript:void (0)" @click="nickNotChangeable=false">修改</a>
      <div v-else><el-button @click="nickChange">确认</el-button>
        <el-button @click="nickChangeCancel">取消</el-button></div>
    </span>
        </el-col>
      </el-form-item>

      <el-form-item label="上传头像">
        <el-upload
            name="userImg"
            class="avatar-uploader"
            :action="url+'/user/avatar'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="form.img" :src="form.img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
          <el-radio label="2">保密</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="QQ号码">
        <el-col :span="11">
          <el-input v-model="form.qq"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="生日">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="所在地">
        <el-cascader
            style="width: 325px"
            v-model="form.address"
            :options="options"
            :props="{value:'label'}"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="个性签名">
        <div style="margin: 20px 0;"></div>
        <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="form.signature"
            maxlength="80"
            show-word-limit
        >
        </el-input>
      </el-form-item>

      <el-form-item label="自我介绍">
        <div style="margin: 20px 0;"></div>
        <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="form.selfInfo"
            maxlength="300"
            show-word-limit
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button style="background-color: chocolate;border: aliceblue;margin-left: 200px" type="primary"
                   @click="onSubmit">修改
        </el-button>
        <el-button style="margin-left: 30px">取消</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import city from "../../../../public/citys.json"
import {mapState} from "vuex";
import axios from "axios";
import router from "@/router";

export default {
  data() {
    return {

      nickNotChangeable: true,
      nick: '',
      form: {
        img: '',
        gender: '',
        qq: '',
        birth: '',
        signature: '',
        selfInfo: '',
        address: '',
        nickChange: 2
      },
      //地址选择器
      options: city
    }
  },
  mounted() {
    axios.get(this.url + "/user/personalData/" + this.userId).then(r => {
      console.log(r.data.data)
      this.nick = r.data.data.nick
      delete r.data.data.nick
      this.form = r.data.data
      this.form.id = this.userId
      console.log(this.form)
    })
  },
  methods: {
    //修改昵称的请求
    nickChange() {
      if (this.nick === this.user.nick) {
        this.$message.error("昵称与原昵称相同")
      } else {
        axios.post("/user/nick/" + this.userId, this.nick).then(r => {
          if (r.data.state === 20000) {
            this.$message.success("修改成功")
            this.user.nick = this.nick
            this.nickNotChangeable = true
            this.form.nickChange = this.form.nickChange-1
          } else {
            this.$message.error(r.data.data)
          }
        })
      }
    },
    //取消修改昵称
    nickChangeCancel() {
      this.nickNotChangeable = true
      this.nick = this.user.nick
    },
    //表单提交
    onSubmit() {
      this.$confirm("确认修改个人信息吗？", "修改个人信息"
          , {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
          }).then(() => {
        let data = this.form
        console.log(this.form)
        if (typeof data.address === "undefined")
          data.address=null
        console.log(data)
        axios.post("/user/personalData", data).then(r => {
          if (r.data.state === 20000){
            console.log(r.data.data)
            this.$message.success("保存个人信息成功~")
          }else {
            this.$message.error(r.data.message)
          }
        }).catch(e => console.log(e))
      }).catch(e => console.log(e))
    },
    /*头像上传开始*/
    handleAvatarSuccess(res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {

      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
    /*头像上传结束*/
  },
  computed: {
    ...mapState(['user', 'url', 'userId']),
  }
}
</script>


<style scoped>
/*上传头像样式开始*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/*上传头像结束*/
</style>